<template>
    <div class="index">
        <div class="title">
            <div class="item">设备总数：{{total}}</div>
            <div class="item">在线:{{online}}</div>
            <div class="item">离线:{{offonline}}</div>
            <div class="item">
                <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                size="mini"
                v-model="date"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
                </el-date-picker>
                <div class=" btn">
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                </div>
            </div>
            
        </div>
        <div class="top">
            <div class="item">
                <h1>营业额汇总</h1>
                <p>{{Math.floor(all*100)/100}}</p>
            </div>
            <div class="item">
                <h1>今日营业额</h1>
                <p>{{price}}</p>
            </div>
        </div>
        <div class="chart">
            <ve-line :data="chartData" :settings="chartSettings"></ve-line>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        this.chartSettings = {
            area: true
        }
        return{
            date:'',//日期时间
            price:0,//今日营业额
            all:0,//营业额汇总
            offonline:0,//离线设备
            online:0,//在线设备
            total:0,//设备总数
            chartData: {
                columns: ['日期','营业额'],
                rows: []
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    mounted(){
        this.day()
        this.summary()
        this.getOnline()
    },
    methods:{
        //设备
        async getOnline(){
            let {data:{code,data:{offonline,online,total}}} = await this.$http.get(this.$api.online,{})
            console.log(offonline,online,total)
            if (code === 0) {
                this.total = total.count
                this.offonline = offonline.count
                this.online = online.count
            }else{
                this.total = 0
                this.offonline = 0
                this.online = 0
            }
        },
        //今日营业额
        async day(){
            let {data:{code,data}} = await this.$http.get(this.$api.day,{}) 
            console.log(data)
            if (code === 0) {
                if (data<=0) {
                    this.price = 0
                }else{
                    this.price = data
                }
            }else{
                this.price = 0
            }
        },
        //
        async summary(){
            let end_at = null
            let start_at = null
            if (this.date) {
                start_at = this.date[0]
                end_at = this.date[1]
            }
            let {data:{code,data}} = await this.$http.get(this.$api.summary,{
                start_at:start_at,
                end_at:end_at
            }) 
            if (code === 0) {
                this.chartData.rows = data.map(item=>{
                    this.all = this.all+Number(item.price)
                    return {'日期':item.date,'营业额':item.price}
                })
                
            }else{
                this.chartData.rows = []
            }
        },
        //点击查询
        search(){
            console.log('点击查询')
            this.summary()
        }
    }
}
</script>
<style lang="scss" scoped>
    .index{
        .title{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 20px;
            background-color: #ffffff;
            margin-bottom: 20px;
            .item{
                margin-right: 10px;
                display: flex;
                .btn{
                    margin-left: 10px;
                }
                .el-range-editor.el-input__inner{
                    height: 32px;
                }
            }
        }
        .top{
            display: flex;
            flex-wrap: wrap;
            .item{
                padding: 40px;
                width: 300px;
                background-color: #fff;
                box-sizing: border-box;
                margin-right: 10px;
            }
        }
        .chart{
            padding:20px 10px 10px 10px;
            background-color: #fff;
            margin-top: 15px;
        }
    }
</style>